<template>
  <div>
    <el-col :span="24" class="toolbar" style="padding: 10px">
      <div class="d-flex a-center j-sb">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" placeholder="标题名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.value" placeholder="请选择">
              <el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getFilterData(0)">查询</el-button>
            <el-button type="primary" @click="getFilterData(1)">全部</el-button>
            <el-button type="primary" @click="getAllData">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <template>
      <el-table
        :data="dataList"
        ref="multipleTable"
        highlight-current-row
        style="width: 100%;"
        stripe
        border
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          type="index"
          :index="indexMethods"
          label="ID"
          min-width="10"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="parentId"
          label="父级编码"
          :formatter="formatterColumn"
          min-width="12"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="名称" min-width="12" align="center"></el-table-column>
        <el-table-column prop="href" label="路径" min-width="12" align="center"></el-table-column>
        <el-table-column prop="descn" label="权限" min-width="12" align="center"></el-table-column>
        <!-- <el-table-column label="是否启用" min-width="12" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isShow" active-value='1' inactive-value='2' active-color="#13ce66" inactive-color="#ff4949" @change="onChange($event,scope.row)"></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" min-width="12" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateData(scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              style="margin-left:2vw"
              @click="deleteData(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      style="float:right;padding:5px;margin-top:10px;"
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="pageTotal"
    ></el-pagination>
    <el-dialog :visible.sync="dialogVisible" width="30%" center :show-close="false">
      <div class="head">
        <div class="title">
          {{dialogTitle}}
          <div class="close" @click="cancel">X</div>
        </div>
      </div>
      <div class="tree">
        <el-form
          :inline="true"
          :model="formData"
          label-position="right"
            label-width="140px"
          class="demo-form-inline"
          :rules="rules"
          ref="roleForm"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item v-if="formData.parentId!='0'" label="路径" prop="href">
            <el-input v-model="formData.href" placeholder="请输入路径名称"></el-input>
          </el-form-item>
          <el-form-item label="上级菜单" prop="parentId">
            <el-select v-model="formData.parentId" placeholder="请选择">
              <el-option v-for="(item,index) in lastOptions" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限" prop="srId">
            <el-select v-model="formData.srId" placeholder="请选择">
              <el-option v-for="(item,index) in roleOptions" :key="index" :label="item.descn" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="formData.icon"></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否启用">
            <el-radio v-model="formData.isShow" label="1">启用</el-radio>
            <el-radio v-model="formData.isShow" label="2">不启用</el-radio>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="footer" class="text-center">
        <el-button style="margin-right:20px" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleTrue">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: { value: "" },
      options: [],
      roleOptions:[],
      lastOptions:[],
      dataList: [],
      pageTotal: 1,
      currentPage: 1,
      formData:{isShow:'1'},
      dialogVisible:false,
      dialogTitle:'',
      id:1,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        href: [{ required: true, message: "请输入路径名称", trigger: "blur" }],
        parentId: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
        srId: [
          { required: true, message: "请选择权限", trigger: "change" }
        ],
        icon: [{ required: true, message: "请填写图标", trigger: "blur" }],
      }
    };
  },
  created() {
    this.getAllMenus();
    this.getRoles();
    this.getAdminMenus();
  },
  methods: {
    //新增
    getAllData(){
        this.formData={parentId:'0',isShow:'1'},
        console.log(this.formData)
        this.dialogTitle='新增菜单'
        this.dialogVisible=true
    },
    getRoles() {
      this.post(
        "/operation/getRoles",
        { pageSize: 100, pageNum: this.currentPage ,descn:this.filters.typeName},
        res => {
          if (res.code == 200) {
              this.roleOptions=res.data.list
          }
        },
        false
      );
    },
    //保存 修改
    dialogVisibleTrue(){
        this.$refs['roleForm'].validate(valid => {
            if(valid){
                let obj= JSON.parse(JSON.stringify(this.formData).replace(/srId/g,"roleId"));
                if(this.dialogTitle=='新增菜单'){
                    this.post('/operation/insertAdminMenus',obj,res=>{
                        if(res.code==200){
                            this.formData={parentId:'0',isShow:'1'}
                            this.dialogVisible=false
                            this.getAdminMenus()
                            this.$message.success('新增成功')
                        }
                    },false)
                }else{
                    this.post('/operation/updateAdminMenus',obj,res=>{
                        if(res.code==200){
                            this.dialogVisible=false
                            this.getAdminMenus()
                            this.$message.success('修改成功')
                        }
                    },false)
                }
            }
        })
    },
    onChange(e,row){
      this.formData=row
      this.formData.isShow=e
      let obj= JSON.parse(JSON.stringify(this.formData).replace(/srId/g,"roleId"));
      this.post('/operation/updateAdminMenus',obj,res=>{
          if(res.code==200){
              this.dialogVisible=false
              this.getAdminMenus()
              this.$message.success('修改成功')
          }
      },false)
    },
    //分页序号连续
    indexMethods(index) {
      return index + 1 + (this.currentPage - 1) * 10;
    },
    handleCurrentChange(num) {
      this.currentPage = num;
      this.getAdminMenus();
    },
    //获取所有权限
    getAllMenus() {
      this.post(
        "/operation/getAllMenus",
        {},
        res => {
          if (res.code == 200) {
            this.options = res.data;
            this.lastOptions= res.data;
            this.lastOptions.unshift({name:'菜单根节点',id:'0'})
          }
        },
        false
      );
    },
    getFilterData(num) {},
    formatterColumn(row, column) {
      if (row.parentId) {
        return row.parentId;
      } else {
        return "0";
      }
    },
    updateData(row) {
        if(row.parentId){
            this.formData=row
            Object.assign(this.formData,{isShow:'1'})
        }else{
            this.formData=row
            Object.assign(this.formData,{isShow:'1',parentId:'0'})
        }
        this.dialogTitle='编辑菜单'
        this.dialogVisible=true
    },
    cancel(){
        this.dialogVisible = false
        this.clearVail()
        this.formData={}
    },
    //获取全部菜单
    getAdminMenus() {
      this.post(
        "/operation/getAdminMenus",
        { pageSize: 10, pageNum: this.currentPage },
        res => {
          if (res.code == 200) {
            this.dataList = res.data.list;
            this.pageTotal = res.data.total;
          }
        },
        false
      );
    },
    //清除验证
    clearVail(){
      this.$refs['roleForm'].clearValidate();
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__header {
  padding: 0;
}
/deep/.el-dialog--center .el-dialog__body {
  padding: 0;
}
.tree {
  margin: 10px;
  padding: 10px;
  /deep/.el-form-item{
    width: 100%;
}
/deep/.el-input__inner {
    padding-right: 30px;
}
}

.head {
  .title {
    height: 60px;
    background-color: #0882f4;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    position: relative;
    .close {
      position: absolute;
      top: 0;
      right: 15px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>